<style lang="less">
@import "vehicle.less";
</style>
<template>
  <div class="search">
    <Row>
      <i-col>
        <Card>
          <Row>
            <Form ref="searchForm" :model="searchForm" inline :label-width="110" @keyup.enter.native="handleSearch()"
              class="search-form">
              <Row class="operation">
                <i-col span="8">
                  <Form-item label="制造商" prop="brandName" style="margin-right: 150px">
                    <Input type="text" v-model="searchForm.brandName" clearable placeholder="请输入见证人姓名"
                      style="width: 200px" />
                  </Form-item>
                </i-col>

                <i-col span="8">
                  <Form-item label="车型" prop="models" style="margin-right: 150px">
                    <Input type="text" v-model="searchForm.models" clearable placeholder="请输入见证人姓名"
                      style="width: 200px" />
                  </Form-item>
                </i-col>

                <i-col span="8">
                  <Form-item label="资产名称" prop="name" style="margin-right: 150px">
                    <Input type="text" v-model="searchForm.name" clearable placeholder="请输入见证人姓名"
                      style="width: 200px" />
                  </Form-item>
                </i-col>


              </Row>

              <Row class="operation">
                <i-col span="8">
                  <Form-item label="车辆类型" prop="type" style="margin-right: 150px">
                    <Select v-model="searchForm.type" filterable placeholder="请选择" clearable style="width: 200px;">
                      <Option v-for="item in greatWallCarTypeList" :value="item.value" :key="item.value">{{ item.title }}
                      </Option>
                    </Select>
                  </Form-item>
                </i-col>

                <i-col span="8">
                  <Form-item label="动力类型" prop="powerType" style="margin-right: 150px">
                    <Select v-model="searchForm.powerType" filterable placeholder="请选择" clearable style="width: 200px;">
                      <Option v-for="item in fuelTypeList" :value="item.value" :key="item.value">{{ item.title }}
                      </Option>
                    </Select>
                  </Form-item>
                </i-col>

                <i-col span="8">
                  <Form-item label="状态" prop="isActive" style="margin-right: 150px">
                    <Select v-model="searchForm.isActive"  placeholder="请选择" clearable style="width: 200px" >
                      <Option value="1">启用</Option>
                      <Option value="0">停用</Option>
                    </Select>
                  </Form-item>
                </i-col>


              </Row>

              <Row class="operation" style="text-align: center">
                <Form-item style="margin-left:-35px;" class="br">
                  <Button @click="handleSearch" type="primary" icon="ios-search">查询</Button>
                  <Button @click="handleReset" icon="md-redo">重置</Button>

                </Form-item>
              </Row>

            </Form>
          </Row>
          <Row class="operation" style="text-align: left">
             <Button @click="synchro"   type="primary" icon="md-add">同步数据</Button>
          </Row>

          <Row>
            <Table :loading="loading" border :columns="columns" :data="data" sortable="custom"
              @on-sort-change="changeSort" @on-selection-change="showSelect" ref="table">

              <template slot-scope="{ row }" slot="yearStyle">
                <span style="color: blue;">{{yearStyleIn(row.yearStyle)}}</span>
              </template>

              <template slot-scope="{ row }" slot="carLevel">
                <span style="color: blue;">{{carLevelIn(row.carLevel)}}</span>
              </template>

              <template slot-scope="{ row }" slot="carType">
                <span style="color: blue;">{{carTypeIn(row.carType)}}</span>
              </template>

              <template slot-scope="{ row }" slot="carTypeDetail">
                <span style="color: blue;">{{carTypeDetailIn(row.carTypeDetail)}}</span>
              </template>

              <template slot-scope="{ row }" slot="type">
                <span style="color: blue;">{{typeIn(row.type)}}</span>
              </template>

              <template slot-scope="{ row }" slot="powerType">
                <span style="color: blue;">{{powerTypeIn(row.powerType)}}</span>
              </template>

              <template slot-scope="{ row }" slot="transmission">
                <span style="color: blue;">{{transmissionIn(row.transmission)}}</span>
              </template>


              <template slot-scope="{ row }" slot="driver">
                <span style="color: blue;">{{driverIn(row.driver)}}</span>
              </template>


              <template slot-scope="{ row }" slot="configure">
                <span style="color: blue;">{{configureIn(row.configure)}}</span>
              </template>

              <template slot-scope="{ row }" slot="blowoff">
                <span style="color: blue;">{{blowoffIn(row.blowoff)}}</span>
              </template>

              <template slot-scope="{ row }" slot="displacement">
                <span style="color: blue;">{{displacementIn(row.displacement)}}</span>
              </template>


              <template slot-scope="{ row }" slot="isActive">
                <div v-if="row.isActive == '1'">
                  启用
                </div>
                <div v-if="row.isActive == '0'">
                  停用
                </div>
              </template>
            </Table>
          </Row>
          <Row type="flex" justify="end" class="page">
            <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
              @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]" size="small"
              show-total show-elevator show-sizer></Page>
          </Row>
        </Card>
      </i-col>
    </Row>

  </div>
</template>

<script>
import {
  getWitnessListData,
  upAllByIds,
  delWitness,
  checkRole
} from "@/projects/afs-channel/api/witness/witness";
import { getDictDataByType } from "@/projects/basic/api/admin/datadic";
import { getBaseInfoByType } from "@/projects/afs-channel/api/common/common";
import { getBaseInfoByRole,getVehicleList,synchro }  from "_p/afs-channel/api/common/common.js";
import hasRole from "_c/directives/hasRole";

export default {
  name: "channelVehicle",
  components: {},
  data() {
    const validateMobile = (rule, value, callback) => {
      if (value.length > 0) {
        var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (!reg.test(value)) {
          callback(new Error("手机号格式错误"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    return {
      loading: true,
      operationLoading: false,
      drop: false,
      dropDownContent: "更多",
      dropDownIcon: "ios-arrow-down",
      selectCount: 0,
      selectList: [],


      searchForm: {
        brandName: null, //制造商名字
        name: "", // 资产名称
        models: "", // 车型名称
        type: "", // 车辆类型
        powerType: "", //动力类型
        isActive: "", // 状态
        pageNumber: 1,
        pageSize: 10,
      },

      hisSearchForm: {
        brandName: null, //制造商名字
        name: "", // 资产名称
        models: "", // 车型名称
        type: "", // 车辆类型
        powerType: "", //动力类型
        isActive: "", // 状态
        pageNumber: 1,
        pageSize: 10,
      },

      // 下面是记录数据字典的信息
      yearStyleList:[], // 年款
      carBodyClassList:[], // 车辆级别
      carTypeMainList:[], // 资产主类
      carTypeDetailList:[], // 资产子类
      greatWallCarTypeList:[], // 车辆类型
      fuelTypeList:[], // 动力类型
      carTransmissionList:[], //变速器
      driverList:[], // 驱动类型
      configureList:[], // 配置
      blowoffList:[], //排放
      displacementList:[], //排量

  

      // 应有的字段信息
      columns: [
        {
          type: "selection",
          minWidth: 60,
          maxWidth: 60,
          align: "center",
          fixed: "left"
        },
        {
          title: "序号",
          type: "index",
          minWidth: 70,
          align: "center",
          fixed: "left"
        },
        {
          title: "制造商名称",
          key: "brandName",
          minWidth: 100,
          align: "center",
          ellipsis: true,
          tooltip: true // 鼠标放上去提示
        },
        {
          title: "车型",
          key: "models",
          minWidth: 160,
          align: "center",
          ellipsis: true, // 开启后，文本将不换行，超出部分显示为省略号
          tooltip: true // 鼠标放上去提示
        },
        {
          title: "年款",
          key: "yearStyle",
          minWidth: 80,
          align: "center",
          slot: "yearStyle",
          ellipsis: true, // 开启后，文本将不换行，超出部分显示为省略号
          tooltip: true // 鼠标放上去提示
        },
        {
          title: "资产名称",
          key: "name",
          align: "center",
          minWidth: 145,
          ellipsis: true, // 开启后，文本将不换行，超出部分显示为省略号
          tooltip: true // 鼠标放上去提示
        },
        {
          title: "指导价",
          key: "guidePrice",
          minWidth: 120,
          align: "center",
          ellipsis: true, // 开启后，文本将不换行，超出部分显示为省略号
          tooltip: true // 鼠标放上去提示
        },
        {
          title: "车辆级别",
          key: "carLevel",
          minWidth: 120,
          align: "center",
          slot: "carLevel",
          ellipsis: true, // 开启后，文本将不换行，超出部分显示为省略号
          tooltip: true // 鼠标放上去提示
        },
        {
          title: "资产主类",
          key: "carType",
          minWidth: 120,
          align: "center",
          slot: "carType",
          ellipsis: true, // 开启后，文本将不换行，超出部分显示为省略号
          tooltip: true // 鼠标放上去提示
        },
        {
          title: "资产子类",
          key: "carTypeDetail",
          minWidth: 120,
          align: "center",
          slot: "carTypeDetail",
          ellipsis: true, // 开启后，文本将不换行，超出部分显示为省略号
          tooltip: true // 鼠标放上去提示
        },
        {
          title: "车辆类型",
          key: "type",
          minWidth: 160,
          align: "center",
          slot: "type",
          ellipsis: true, // 开启后，文本将不换行，超出部分显示为省略号
          tooltip: true // 鼠标放上去提示
        },
        
        {
          title: "车型编码",
          key: "code",
          minWidth: 160,
          align: "center",
          ellipsis: true, // 开启后，文本将不换行，超出部分显示为省略号
          tooltip: true // 鼠标放上去提示
        },
        {
          title: "款式显示规则",
          key: "styleRule",
          minWidth: 160,
          align: "center",
          ellipsis: true, // 开启后，文本将不换行，超出部分显示为省略号
          tooltip: true // 鼠标放上去提示
        },
        {
          title: "全称",
          key: "fullName",
          minWidth: 160,
          align: "center",
          ellipsis: true, // 开启后，文本将不换行，超出部分显示为省略号
          tooltip: true // 鼠标放上去提示
        },
        {
          title: "CMSID",
          key: "cmsId",
          minWidth: 100,
          align: "center"
          //sortable: true,
        },
        {
          title: "对应车300的车系ID",
          key: "seriesId",
          minWidth: 100,
          align: "center"
          //sortable: true,
        },
        {
          title: "动力类型",
          key: "powerType",
          minWidth: 160,
          align: "center",
          slot: "powerType",
          ellipsis: true, // 开启后，文本将不换行，超出部分显示为省略号
          tooltip: true // 鼠标放上去提示
        },
        {
          title: "排量",
          key: "displacement",
          minWidth: 120,
          align: "center",
          ellipsis: true, // 开启后，文本将不换行，超出部分显示为省略号
          tooltip: true, // 鼠标放上去提示
          slot:"displacement"
        },
        {
          title: "变速器",
          key: "transmission",
          minWidth: 120,
          align: "center",
          slot: "transmission",
          ellipsis: true, // 开启后，文本将不换行，超出部分显示为省略号
          tooltip: true // 鼠标放上去提示
        },
        {
          title: "驱动",
          key: "driver",
          minWidth: 120,
          align: "center",
          slot: "driver",
          ellipsis: true, // 开启后，文本将不换行，超出部分显示为省略号
          tooltip: true // 鼠标放上去提示
        },
        {
          title: "资产编码",
          key: "code",
          minWidth: 120,
          align: "center",
          ellipsis: true, // 开启后，文本将不换行，超出部分显示为省略号
          tooltip: true // 鼠标放上去提示
        },
        {
          title: "配置",
          key: "configure",
          minWidth: 260,
          align: "center",
          slot: "configure",
          ellipsis: true, // 开启后，文本将不换行，超出部分显示为省略号
          tooltip: true // 鼠标放上去提示
        },
        
        {
          title: "排放",
          key: "blowoff",
          minWidth: 100,
          align: "center",
          slot: "blowoff",
          ellipsis: true, // 开启后，文本将不换行，超出部分显示为省略号
          tooltip: true // 鼠标放上去提示
        },

        {
          title: "更新",
          key: "updateTime",
          minWidth: 100,
          align: "center"
          //sortable: true,
        },
        {
          title: "状态",
          key: "isActive",
          minWidth: 150,
          align: "center",
          fixed: "right",
          slot: "isActive"
        }
      ],
      data: [],
      total: 0,
      // 停用的表单
      userForm: {
        startStopReason: null //停用原因
      },
      userFormValidate: {
        startStopReason: [
          { required: true, message: "请输入原因", trigger: "blur" }
        ]
      },
      limitPut: [
        { required: false, message: "请输入正确的手机号", trigger: "blur" },
        { validator: validateMobile, trigger: "blur" }
      ]
    };
  },
  methods: {
    init() {
      this.getWitnessList();

      this.yearStyle();
      this.carBodyClass();
      this.carTypeMain();
      this.carTypeDetail();
      this.greatWallCarType();
      this.fuelType();
      this.carTransmission();
      this.driver();
      this.configure();
      this.blowoff();
      this.displacement();
    },

     // 获取年款
    yearStyle() {
      let param = {
        type: "yearStyle"
      };
      getDictDataByType(param.type).then(res => {
        if (res.code === "0000") {
          this.yearStyleList = res.data;
        }
      });
    },
    // 翻译 年款
    yearStyleIn(v){
      if(this.yearStyleList.length>0){
        for(var i =0; i<this.yearStyleList.length;i++){
          if(this.yearStyleList[i].value==v){
            return this.yearStyleList[i].title;
          }
        }
      }
    },

    // 获取车辆级别
    carBodyClass() {
      let param = {
        type: "carBodyClass"
      };
      getDictDataByType(param.type).then(res => {
        if (res.code === "0000") {
          this.carBodyClassList = res.data;
        }
      });
    },
    // 翻译 车辆级别
    carLevelIn(v){
      if(this.carBodyClassList.length>0){
        for(var i =0; i<this.carBodyClassList.length;i++){
          if(this.carBodyClassList[i].value==v){
            return this.carBodyClassList[i].title;
          }
        }
      }
    },

    // 获取 资产主类
    carTypeMain() {
      let param = {
        type: "carTypeMain"
      };
      getDictDataByType(param.type).then(res => {
        if (res.code === "0000") {
          this.carTypeMainList = res.data;
        }
      });
    },

    // 翻译资产主类
    carTypeIn(v){
        if(this.carTypeMainList.length>0){
        for(var i =0; i<this.carTypeMainList.length;i++){
          if(this.carTypeMainList[i].value==v){
            return this.carTypeMainList[i].title;
          }
        }
      }
    },

        // 获取 资产子类
    carTypeDetail() {
      let param = {
        type: "carTypeDetail"
      };
      getDictDataByType(param.type).then(res => {
        if (res.code === "0000") {
          this.carTypeDetailList = res.data;
        }
      });
    },
    
    // 翻译资产子类
    carTypeDetailIn(v){
      if(this.carTypeDetailList.length>0){
        for(var i =0; i<this.carTypeDetailList.length;i++){
          if(this.carTypeDetailList[i].value==v){
            return this.carTypeDetailList[i].title;
          }
        }
      }
    },

     // 获取车辆类型
    greatWallCarType() {
      let param = {
        type: "greatWallCarType"
      };
      getDictDataByType(param.type).then(res => {
        if (res.code === "0000") {
          this.greatWallCarTypeList = res.data;
        }
      });
    },

    // 翻译 车辆类型
    typeIn(v){
      if(this.greatWallCarTypeList.length>0){
        for(var i =0; i<this.greatWallCarTypeList.length;i++){
          if(this.greatWallCarTypeList[i].value==v){
            return this.greatWallCarTypeList[i].title;
          }
        }
      }
    },

    // 获取动力类型
    fuelType() {
      let param = {
        type: "fuelType"
      };
      getDictDataByType(param.type).then(res => {
        if (res.code === "0000") {
          this.fuelTypeList = res.data;
        }
      });
    },
    // 翻译动力类型
    powerTypeIn(v){
      if(this.fuelTypeList.length>0){
        for(var i =0; i<this.fuelTypeList.length;i++){
          if(this.fuelTypeList[i].value==v){
            return this.fuelTypeList[i].title;
          }
        }
      }
    },


       // 获取变速器
    carTransmission() {
      let param = {
        type: "greatTransmission"
      };
      getDictDataByType(param.type).then(res => {
        if (res.code === "0000") {
          this.carTransmissionList = res.data;
        }
      });
    },
    // 翻译变速器
    transmissionIn(v){
      if(this.carTransmissionList.length>0){
        for(var i =0; i<this.carTransmissionList.length;i++){
          if(this.carTransmissionList[i].value==v){
            return this.carTransmissionList[i].title;
          }
        }
      }
    },

    // 获取驱动类型
    driver() {
      let param = {
        type: "driver"
      };
      getDictDataByType(param.type).then(res => {
        if (res.code === "0000") {
          this.driverList = res.data;
        }
      });
    },
    // 翻译驱动类型
    driverIn(v){
      if(this.driverList.length>0){
        for(var i =0; i<this.driverList.length;i++){
          if(this.driverList[i].value==v){
            return this.driverList[i].title;
          }
        }
      }
    },

    // 获取配置
    configure() {
      let param = {
        type: "configure"
      };
      getDictDataByType(param.type).then(res => {
        if (res.code === "0000") {
          this.configureList = res.data;
        }
      });
    },
    // 翻译配置
    configureIn(v){
      if(this.configureList.length>0){
        for(var i =0; i<this.configureList.length;i++){
          if(this.configureList[i].value==v){
            return this.configureList[i].title;
          }
        }
      }
    },

    // 获取排放
    blowoff() {
      let param = {
        type: "blowoff"
      };
      getDictDataByType(param.type).then(res => {
        if (res.code === "0000") {
          this.blowoffList = res.data;
        }
      });
    },
    //翻译 排放
    blowoffIn(v){
      if(this.blowoffList.length>0){
        for(var i =0; i<this.blowoffList.length;i++){
          if(this.blowoffList[i].value==v){
            return this.blowoffList[i].title;
          }
        }
      }
    },

    //  获取排量
    displacement(){
      let param = {
        type: "displacement"
      };
      getDictDataByType(param.type).then(res => {
        if (res.code === "0000") {
          this.displacementList = res.data;
        }
      });
    },
    // 翻译排量
    displacementIn(v){
      if(this.displacementList.length>0){
        for(var i =0; i<this.displacementList.length;i++){
          if(this.displacementList[i].value==v){
            return this.displacementList[i].title;
          }
        }
      }
    },
 

    

   

    


 
    // 改变一页多少个
    changePage(v) {
      console.log("点击下面的页码" + v);
      this.searchForm.pageNumber = v;
      this.hisSearchForm.pageNumber = v;
      // this.getWitnessList();
      this.getHisWitnessList();
      this.clearSelectAll();
    },
    // 一页多少个
    changePageSize(v) {
      console.log("这个是啥");
      this.searchForm.pageSize = v;
      this.hisSearchForm.pageSize = v;
      // this.getWitnessList();
      this.getHisWitnessList();
      this.clearSelectAll();
    },
    // 查找见证人
    getWitnessList() {

      // 多条件查询见证人列表
      this.loading = true;
      getVehicleList(this.searchForm).then(res => {
        this.loading = false;
        if (res.code === "0000") {
          this.data = res.data.records;
          this.total = res.data.total;
        }
      });
    },
    // 调用历史的搜索数据
    getHisWitnessList() {

      // 多条件查询见证人列表
      this.loading = true;

      getVehicleList(this.hisSearchForm).then(res => {
        this.loading = false;
        if (res.code === "0000") {
          this.data = res.data.records;
          this.total = res.data.total;
        }
      });
    },

    //查询按钮操作
    handleSearch() {
      this.searchForm.pageNumber = 1;
      // 把搜索的参数赋值给历史记录
      this.hisSearchForm.pageNumber = this.searchForm.pageNumber;
      this.hisSearchForm.pageSize = this.searchForm.pageSize;
      this.hisSearchForm.brandName = this.searchForm.brandName;
      this.hisSearchForm.name = this.searchForm.name;
      this.hisSearchForm.models = this.searchForm.models;
      this.hisSearchForm.type = this.searchForm.type;
      this.hisSearchForm.powerType = this.searchForm.powerType;
      this.hisSearchForm.isActive = this.searchForm.isActive;
      this.getWitnessList();
      
    },
    // 点击重置
    handleReset() {
      this.$refs.searchForm.resetFields();
      this.searchForm.brandName = "";
      this.searchForm.name = "";
      this.searchForm.models = "";

      this.searchForm.pageNumber = 1;


      // 把搜索的参数赋值给历史记录
      this.hisSearchForm.pageNumber = this.searchForm.pageNumber;
      this.hisSearchForm.pageSize = this.searchForm.pageSize;
      this.hisSearchForm.brandName = this.searchForm.brandName;
      this.hisSearchForm.name = this.searchForm.name;
      this.hisSearchForm.models = this.searchForm.models;
      this.hisSearchForm.type = this.searchForm.type;
      this.hisSearchForm.powerType = this.searchForm.powerType;
      this.hisSearchForm.isActive = this.searchForm.isActive;
      this.getWitnessList();
    },
    // 排序
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order === "normal") {
        this.searchForm.order = "";
      }
      this.getHisWitnessList();
    },
    showSelect(e) {
      this.selectList = e;
      this.selectCount = e.length;
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false);
    },

    // 同步数据
    synchro(){
      synchro().then(res => {
        this.loading = false;
        if (res.code === "0000") {
          this.$Message.success("同步成功！");
        }
      });
    }
  },
  // 遍及用户v

  mounted() {
    this.init();
  }
};
</script>
